<template>
	<cl-dialog v-model="visible" title="修改学员信息" width="600px">
		<el-form ref="form" :model="formData" label-width="100px">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="formData.name" />
			</el-form-item>
			<el-form-item label="电话" prop="phone">
				<el-input v-model="formData.phone" />
			</el-form-item>
			<!--性别-->
			<el-form-item label="性别" prop="gender">
				<el-radio-group v-model="formData.gender">
					<el-radio :label="0">男</el-radio>
					<el-radio :label="1">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="生日" prop="birthday">
				<el-date-picker
					v-model="formData.birthday"
					type="date"
					placeholder="选择日期"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
				/>
			</el-form-item>
			<!-- 销售名称 -->
			<el-form-item label="销售" prop="sales">
				<el-input :value="salesName" disabled />
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" placeholder="请输入备注" v-model="formData.remark" />
			</el-form-item>
			<el-form-item label="地铁站" prop="subway">
				<SelectSubway v-model="formData.subway" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="showReport()">报告管理</el-button>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button type="primary" @click="handleSave">确定</el-button>
		</template>
		<el-dialog v-if="showReportDialog" v-model="showReportDialog">
            <shop-student-report
                :student-id="currentStudentId"
            />
        </el-dialog>
	</cl-dialog>
</template>

<script lang="ts" setup>
import { useCrud, useTable, useUpsert, useSearch } from "@cool-vue/crud";
import { ref, reactive, computed, watch } from 'vue';
import { useCool } from '/@/cool';
import { useDict } from '/$/dict';
import { ElMessage } from 'element-plus';
import SelectSubway from '../../student/components/select-subway.vue';
import ShopStudentReport from '../../student/components/ShopStudentReport.vue';

const { service } = useCool();
const { dict } = useDict();

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	studentId: {
		type: [Number, String],
		default: 0
	}
});

const emit = defineEmits(['update:modelValue', 'success']);
const salesName = ref('');
const visible = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
});

const salesList = ref([]);
const formData = reactive({
	id: 0,
	name: '',
	phone: '',
	gender: '',
	birthday: '',
	project: '',
	sales: '',
	flowStatus: '',
	inGroup: '',
	subway: '',
	remark: '',
});


// 报告表单数据
const reportForm = reactive({
	picUrl: '',
	remark: '',
	studentId: props.studentId
});

const currentStudentId = ref(0);
const showReportDialog = ref(false);
const appointDialogVisible = ref(false);

// 初始化销售列表和学员信息
async function initData() {
	try {
		// 获取销售列表
		const salesRes = await service.base.sys.user.getSelectList();
		if (salesRes) {
			salesList.value = salesRes;
		}

		// 获取学员信息
		if (props.studentId) {
			const studentRes = await service.student.student.info({
				id: props.studentId
			});

			Object.assign(formData, {
				id: studentRes.id,
				name: studentRes.name,
				phone: studentRes.phone,
				gender: studentRes.gender,
				birthday: studentRes.birthday,
				project: studentRes.project,
				sales: studentRes.sales,
				flowStatus: studentRes.flowStatus,
				inGroup: studentRes.inGroup,
				subway: studentRes.subway,
				remark: studentRes.remark,	
			});

			salesName.value = (await service.base.sys.user.info({
				id: studentRes.sales
			})).name || '';
			
			reportForm.studentId = props.studentId;
		}
	} catch (error) {
		console.error('初始化数据失败:', error);
	}
}


// 保存
async function handleSave() {
	try {
		await service.student.student.update(formData);
		ElMessage.success('保存成功');
		visible.value = false;
		emit('success');
	} catch (error) {
		ElMessage.error('保存失败');
	}
}

const handleCancel = () => {
	visible.value = false;
};

// 打开报告
async function showReport() {
    currentStudentId.value = Number(props.studentId);
	showReportDialog.value = true;
}


// 监听弹窗显示状态，显示时初始化数据
watch(
	() => visible.value,
	val => {
		if (val && props.studentId) {
			initData();
		}
	}
);

// 监听学员ID变化
watch(
	() => props.studentId,
	val => {
		if (visible.value && val) {
			initData();
		}
	}
);


defineExpose({
	formData
});
</script>
<style scoped>
.report-block {
	border: 1px solid #eee;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}
</style>